import React, {Component} from "react";
import PropTypes from "prop-types";
import {Card, Form, Icon, Input, Modal} from "antd";

import {SearchForm, TableContent} from "../../widgets";

const FormItem = Form.Item;

class PopUpInput extends Component {
    static propTypes = {
        defaultVal: PropTypes.string,
        innerKey: PropTypes.string,
        displayKey: PropTypes.string,
        onDel: PropTypes.func,
        onSearch: PropTypes.func,
        onChange: PropTypes.func
    }

    constructor(props) {
        super(props)
        this.state = {
            innerValue: undefined,
            displayValue: undefined
        }
    }
    componentWillReceiveProps(nextProps) {
        const {innerKey, displayKey} = this.props;
        // Should be a controlled component.
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState({
                innerValue: value
            });
        }
    }
    triggerChange = () => {
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(Object.assign({}, this.state));
        }
    }
    setText = (text) => {
        this.setState({
            displayValue: text
        })
    }
    render = () => {
        const { onDel, onSearch } = this.props;
        return (
            <Input value={this.state.displayValue} onChange={this.triggerChange}  readOnly suffix={<div style={{cursor: 'pointer'}}>
                <Icon type="close" onClick={() => {
                    onDel()
                }}/>
                <Icon style={{marginLeft: '10px', marginRight: '5px'}}　type="search"  onClick={() => {
                    onSearch()
                }} />
            </div>} />
        )
    }
}

export default class extends Component {
    static propTypes = {
        callback: PropTypes.func,
        initVal: PropTypes.any,
        form: PropTypes.object.isRequired,
        field: PropTypes.object.isRequired,
        tableTitle: PropTypes.string.isRequired, //form标题
        tableSeaField: PropTypes.array, //表格搜索
        tableSeaExtendVal: PropTypes.object, //表格搜索初始字段
        tableUrl: PropTypes.string, //表格url
        tableColumn: PropTypes.array, //表格列
        valueField: PropTypes.string.isRequired, //值字段
        keyField: PropTypes.string.isRequired, //键字段
    }
    constructor(props) {
        super(props)
        this.table = undefined
        this.input = undefined
        this.state = {
            openWinVisible: false,
            searchParam: this.props.tableSeaExtendVal || {},
        }
    }

    setText = (val) => {
        this.input.setText(val)
    }

    setValue = (val) => {
        const {form, field,initVal,keyField, valueField, callback} = this.props;
        const {getFieldDecorator, setFieldsValue} = form
        const key = field.key
        val = val || {}
        let obj = {}
        obj[key] = val[keyField]
        setFieldsValue(obj)
        this.input.setText(val[valueField] || '')
        callback && callback(val)
    }

    empty = () => {
        this.setValue(undefined)
    }

    componentDidMount() {
        this.input.setText(this.props.initValTransfer)
    }
    render = () => {
        const {form, field,initVal, valueField, keyField, initValTransfer} = this.props;
        const {getFieldDecorator, setFieldsValue} = form
        return (
            <div>
                {
                    getFieldDecorator(field.key, {
                        initialValue: initVal,
                        rules: [{required: (field.required) || false, message: (field.requiredMsg || '')}]
                    })(
                        <PopUpInput
                            ref={(e) => {this.input= e } }
                            innerKey={keyField}
                            displayKey={valueField}
                            onDel={() => {this.setValue()}}
                            onSearch={() => {this.showOpenWin()}}
                        />
                    )
                }
                {
                    this.renderWinModal()
                }
            </div>
        )
    }

    showOpenWin = () => {
        this.setState({
            openWinVisible: true
        },() => {
            this.onSearch()
        })
    }

    hideOpenWin = () => {
        this.setState({
            openWinVisible: false
        })
    }

    onSearch = (values) => {
        this.setState({
            searchParam: Object.assign({}, this.props.tableSeaExtendVal || {}, values)
        }, () => {
            this.table.loadData()
        })
    }

    renderWinModal() {
        const {tableSeaField, tableColumn, tableUrl, valueField,keyField, tableTitle, xtype} = this.props;
        return (
            <Modal
                visible={this.state.openWinVisible}
                width={600}
                onCancel={this.hideOpenWin}
                footer={[]}
            >
                <Card title={tableTitle} bordered={false}>
                    <SearchForm fields={tableSeaField} onSearch={this.onSearch}/>
                    <TableContent
                        ref={(e) => {this.table = e}}
                        noLoad={true}
                        columns={tableColumn}
                        url = {tableUrl}
                        searchParam={this.props.tableSeaExtendVal || {}}
                        onRowDoubleClick={(d) => {
                            this.setValue(d)
                            this.hideOpenWin()
                        }}
                    />
                </Card>
            </Modal>
        )
    }
}
